<template>
    <div class="box">
      <div>
        <KinesisContainer>
          <kinesisElement :strenght="10">
            <div style="display:flex;justify-content: space-between;align-items: center;">
              <div class="animated fadeInLeft">
                <div class="button2" @click="centerDialogVisible = true">
                  <span>新增今日份任务</span>
                </div>
              </div>
              <div class="animated fadeInLeft">
                <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=430685732&auto=1&height=66"></iframe>
              </div>
            </div>
          </kinesisElement>
        </KinesisContainer>
        <div style="font-size: 14px;position: relative;margin-left: 20px;margin-top: 30px;color:white;" v-if="noDoneTaskList.length > 0">待完成任务 - {{ noDoneTaskList.length }}</div>
        <div class="task_list" v-if="noDoneTaskList.length > 0">
          <div class="rotate">
            <div class="animated fadeInUp">
                <div class="task taskbg" v-for="item in noDoneTaskList" key="id">
                  <div v-if="!item.done">
                    <div style="text-align: center">{{ moment(item.created).format("yyyy-MM-DD HH:mm:ss") }}</div>
                    <div class="content" v-html="item.content"></div>
                    <div class="action">
                      <span @click="done(item.id)">标记完成</span>
                      <span @click="edit(item.id)">编辑</span>
                      <span @click="del(item.id)">删除</span>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <div style="font-size: 14px;position: relative;margin-left: 20px;margin-top: 30px;color:white;" v-if="doneTaskList.length > 0">已完成任务 - {{ doneTaskList.length }}</div>
        <div class="task_list" v-if="doneTaskList.length > 0">
          <div class="rotate">
            <div class="animated fadeInLeft">
              <div class="task taskbg" v-for="item in doneTaskList" key="id">
                <div v-if="item.done">
                  <div style="text-align: center">{{ moment(item.created).format("yyyy-MM-DD HH:mm:ss") }}</div>
                  <div class="content" v-html="item.content"></div>
                  <div class="action">
                    <span @click="noDone(item.id)">还差一点</span>
                    <span @click="edit(item.id)">编辑</span>
                    <span @click="del(item.id)">删除</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="add_text" @click="centerDialogVisible = true" v-if="taskList.length === 0">
          新增今日份任务(*^▽^*)
        </div>
        <el-dialog
          v-model="centerDialogVisible"
          title="任务"
          width="80%"
          center
        >
          <div class="animated fadeInUp">
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                mode="default"
              />
              <Editor
                style="height: 500px; overflow-y: hidden"
                v-model="valueHtml"
                :defaultConfig="editorConfig"
                mode="default"
                @onCreated="handleCreated"
              />
            </div>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="add">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
      
    </div>
  
</template>

<script setup>
import moment from "moment";
import "@wangeditor/editor/dist/css/style.css"; // /入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { nanoid } from "nanoid";

let isUpdate = false;

// 编辑器实例，必须用shallowRef
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref("");
const centerDialogVisible = ref(false);
const taskList = ref([
  {
    content: `<pre>// 学习微前端一分钟// 学习微服务一分钟// 学习消息队列// 学习docker，k8s</pre><p><br></p>`,
    created: "2022-07-01T07:14:18.474Z",
    done: false,
    id: "QuZo22345Q223444eX"
  },
  {
    content:`<p><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659254540&t=6a682ae53cb08f301f191ed8ef6b4a12" alt="我的图片1" data-href="https://gimg2.baidu.com/image_search/src=http://img.jj20.com/up/allimg/tp09/210F2130512J47-0-lp.jpg&refer=http://img.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659254540&t=6a682ae53cb08f301f191ed8ef6b4a12" style=""/></p><p><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1115%2F0ZR1095111%2F210ZP95111-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659254540&t=bebd209f9903215965ceb3c6903c6a2e" alt="我的图片2" data-href="https://gimg2.baidu.com/image_search/src=http://img.jj20.com/up/allimg/1115/0ZR1095111/210ZP95111-7-1200.jpg&refer=http://img.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659254540&t=bebd209f9903215965ceb3c6903c6a2e" style=""/></p><p><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242312005c1-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659254540&t=cd7aa3bbd41c0fc924ec2073fd1f3bd2" alt="我的图片3" data-href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242312005c1-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659254540&t=cd7aa3bbd41c0fc924ec2073fd1f3bd2" style=""/></p>`,
    created: "2022-07-01T07:14:58.474Z",
    done: false,
    id: "QuZo22345QP23a2SeX"
  },
  {
    content: "<ol><li>学习koa2</li><li>学习express</li><li>学习sass，less</li><li>学习spring</li><li>学习mybatis</li><li>学习mysql</li><li>学习oracle</li><li>学习mongodb</li><li>学习redis</li><li>学习大数据</li><li>学习区块链</li></ol>",
    created: "2022-07-01T07:14:58.474Z",
    done: false,
    id: "QuZo22345QP7Xa2SeX"
  },
  {
    content: "<ul><li><span style=\"color: rgb(114, 192, 64); font-family: 黑体;\">学习正则表达式</span></li><li><span style=\"color: rgb(114, 192, 64); font-family: 黑体;\">学习Echat</span></li></ul>",
    created: "2022-07-01T07:14:58.474Z",
    done: true,
    id: "QuZo223344gQP7Xa2SeX"
  },
  {
    content: "<p>1、😀学习使用ui组件库😎</p><p>😀</p><p>😃</p><p>😀</p><p>😃</p><p>😀</p><p>😃</p><p>😀</p><p>😃</p>",
    created: "2022-07-01T07:14:58.474Z",
    done: true,
    id: "QuZoXxDZExIgQP7Xa2SeX"
  },
  {
    content: "<p><span style=\"color: rgb(255, 122, 69);\">1、学习HTML一分钟</span></p><p><span style=\"color: rgb(255, 122, 69);\">2、学习CSS一分钟</span></p><p><span style=\"color: rgb(255, 122, 69);\">3、学习JAVASCRIPT一分钟</span></p>",
    created: "2022-07-01T06:09:41.090Z",
    done: true,
    id: "XpxDqqC_DIau_5Ua5Wbs0"
  },
  {
    content: "<p><u><em>1、学习Jquery，bootstrap两分钟</em></u></p>",
    created: "2022-07-01T06:10:48.753Z",
    done: true,
    id: "LMOVUrSKLckhS2YN4IVL0"
  },
  {
    content: "<p><span style=\"font-family: 华文仿宋;\">1、吃饭</span></p><p><span style=\"font-family: 华文仿宋;\">2、睡觉</span></p>",
    created: "2022-07-01T06:07:52.836Z",
    done: false,
    id: "0GALpcWJZhx48PQHeZ0I8"
  }
]);
const doneTaskList = ref([])
const noDoneTaskList = ref([])

const toolbarConfig = {};
const editorConfig = { placeholder: "开始撰写今日份任务..." };
//组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const filterDoneAndNoDomeTask = () => {
  doneTaskList.value = taskList.value.filter(item => item.done)
  noDoneTaskList.value = taskList.value.filter(item => !item.done)
}

onMounted(() => {
  taskList.value = JSON.parse(localStorage.getItem("taskList")) && JSON.parse(localStorage.getItem("taskList")) || taskList.value;
  filterDoneAndNoDomeTask()
});

const handleCreated = (editor) => {
  editorRef.value = editor; //记录editor 实例,重要！
};

let updateId;

const add = () => {
  centerDialogVisible.value = false;
  if (!isUpdate) {
    const task = {
      id: nanoid(),
      content: valueHtml.value,
      created: new Date(),
      done: false,
    };
    taskList.value = [task, ...taskList.value];
    localStorage.setItem("taskList", JSON.stringify(taskList.value));
  } else {
    taskList.value.forEach((item) => {
      if (item.id === updateId) {
        item.content = valueHtml.value;
      }
    });
    isUpdate = false;
  }
  valueHtml.value = "<p></p>";
  filterDoneAndNoDomeTask()
  console.log(taskList.value);
};

const edit = (id) => {
  isUpdate = true;
  updateId = id;
  valueHtml.value = taskList.value.filter((item) => item.id === id)[0].content;
  centerDialogVisible.value = true;
};

const del = (id) => {
  taskList.value = taskList.value.filter((item) => item.id != id);
  localStorage.setItem("taskList", JSON.stringify(taskList.value));
  filterDoneAndNoDomeTask()
}

const done = (id) => {
  console.log(doneTaskList.value);
  taskList.value.forEach((item) => {
    if (item.id === id) {
      item.done = true;
    }
  });
  localStorage.setItem("taskList", JSON.stringify(taskList.value));
  filterDoneAndNoDomeTask()
}

const noDone = (id) => {
  taskList.value.forEach((item) => {
    if (item.id === id) {
      item.done = false;
    }
  });
  localStorage.setItem("taskList", JSON.stringify(taskList.value));
  filterDoneAndNoDomeTask()
}
</script>

<style>
.box {
  width: 90vw;
  margin: 0 auto;
  margin-top: 50px;
  font-family: "华文楷体";
  font-size: 20px;
  color: rgb(0, 183, 255);
  margin-bottom: 100px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.task_list > div > div{
  display: flex;
  overflow-x: auto;
  border-right: 2px solid #05d7f3f8;
  overflow-y: hidden;
}
@property --rotate{
      syntax: "<angle>";
      initial-value: 132deg;
      inherits: false;
    }
.task {
  margin: 20px;
  transition: .3s !important;
  color: white !important;
  background-color: #191c29;
  width: 200px;
  height: 300px;
  font-size: 14px;
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 20px;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
}
.task::before{
      content: "";
      width: 104%;
      height: 102%;
      border-radius: 8px;
      background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3, #4e00c2);
      position: absolute;
      z-index: -1;
      top: -1%;
      left: -2%;
      animation: spin 1.5s linear infinite;
    }
    .task::after{
      position: absolute;
      content: "";
      top: 50px;
      left: 0;
      right: 0;
      z-index: -1;
      height: 100%;
      width: 100%;
      margin: 0 auto;
      transform: scale(0.8);
      filter: blur(50px);
      background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3, #4e00c2);
      opacity: 1;
      transition: opacity .5s;
      animation: spin 1.5s linear infinite;
    }
    @keyframes spin{
      0%{
        --rotate: 0deg;
      }
      100%{
        --rotate: 360deg;
      }
    }
.content {
  overflow-y: auto;
  width: 200px;
  height: 250px;
}
.add_text {
  font-size: 50px;
  margin-top: 150px;
  text-align: center;
  font-family: "华文彩云";
  cursor: pointer;
}
.button2 {
  cursor: pointer;
  margin-left: 20px;
  display: inline-block;
  width: 200px;
  height: 46px;
  line-height: 46px;
  color: #ffffff;
  font-size: 18px;
  border-radius: 27px;
  text-align: center;
  background-image: linear-gradient(
    to right,
    #00f7ff 0%,
    #02e3eb 25%,
    #0af780be 50%,
    #02c8eb 75%,
    #00d9ff 100%
  );
  background-size: 200%;
  animation: colorGradient 1.5s ease infinite reverse;
}

@keyframes colorGradient {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}
.action {
  color: white;
  font-size: 12px;
  opacity: 0;
  text-align: right;
}
.action span{
  margin-right: 6px;
}
.task:hover .action {
  transition: 0.5s 0.5s;
  opacity: 1;
}
.task:hover{
  transition: .3s !important;
  transform: translateY(-10px) !important;
}
</style>
